<template>
  <!------------------------- 规格弹窗 ------------------------->
  <!---------    说明
      此组件为规格展示与交互组件，用于快速下单商品多规格显示，商品详情页面规格显示
      props：
        data      ———— 商品信息
        pageType  ———— 页面类型(quickPlaceOrder,detail)
      method：
        closePopup  ———— 关闭弹窗
        addCart     ———— 加购物车
        buyNow      ———— 直接购买
   -->
	 <div class="popup-content">
    <svg-icon icon-class="delete-2" class="color-gray fs-26 popup-close" @goPage="closePopup" />
    <div class="pb-170 pos-r" style="z-index:1;">
      <div class="flex pb-30 hb">
        <img-box class="is-200 br-10 flex-s-0" :img-url="changeData.ThumbnailUrl410" />
        <div class="prductItem-detail ml-20 flex-1">
          <p class="text-show-line-2 mb-10 fs-28 fw-b">{{ changeData.ProductName }}</p>
					<div v-if="switch85 == 1">
						<p v-show="V_GradePrice && ActivityType==0" class="color-primary fs-40">
							<span class="fs-26">￥</span>{{parseFloat(Number(V_GradePrice).toFixed(2))}}
						</p>
					</div>
        </div>
      </div>
      <div v-if="changeData.DefaultUnit" class="skuItem hb">
        <p class="color-gray-light fs-24 mt-20">
          <span>单位</span>
          <span
            v-show="activeUnitName !== changeData.BaseUnit && changeData.BaseUnit"
          >(1{{ activeUnitName }}={{ activeUnitRatio }}{{ changeData.BaseUnit }})</span>
          <span>：</span>
        </p>
        <div v-if="changeData.UnitList && changeData.UnitList.length > 0" class="mt-20 flex-v-c flex-wrap">
          <div class="skuBtn color-primary">
            {{ changeData.UnitList[0] }}
          </div>
        </div>
        <div v-else class="mt-20 flex-v-c flex-wrap">
          <div class="skuBtn color-primary">{{ changeData.DefaultUnit }}</div>
        </div>
      </div>
      <div class="skuItem">
				<div v-if="changeData.ProductSkuAttrNewList&&changeData.ProductSkuAttrNewList.length>0" class="spec-tree">
					<specTreeItem
						:tree-data="changeData.ProductSkuAttrNewList"
						:active-id="activeId"
						:product-id="changeData.ID"
						:product-name="changeData.ProductName"
						:min-num="minNum"
						:switch7="switch7"
						@treeClickEvent="treeClickEvent"
						@setCarListFunc="setCarListFunc"
					/>
				</div>
        <!-- 单规格 -->
        <div v-else>
          <div v-for="(item, index) in ProductSkuAttrList[0].SkuList" :key="index" class="flex-s-c mt-24 fs-28 ">
            <div class="flex-2 tal">
              <span>购买数量</span>
            </div>
            <div class="flex-1 tar flex-fe-c">
              <span
                class="btn-minus flex-s-0 "
                :class="item.Amount <= 0 ? 'color-shadow' : ''"
                @click="changeAmount(item, item.Amount, -1)"
              >-</span>
              <div class="btn-input-box">
                <input
                  v-model="item.Amount"
                  type="number"
                  class="btn-input"
                  @blur="changeAmount(item, item.Amount, 0)"
                >
              </div>
              <span class="btn-plus flex-s-0" @click="changeAmount(item, item.Amount, 1)">+</span>
            </div>
          </div>
        </div>
       
      </div>
      <div class="fixed-bottom bottom-box">
        <button class="btn-large color-white bg-primary" @click="addCart">确定</button>
			</div>
    </div>
  </div>
</template>

<script>
import imgBox from 'components/imgBox'
import { AddOrEditUserCarList } from 'api/product'
import { GetUpgradeGradeLink } from 'api/member'

import specTreeItem from '../allocation/specTreeItem.vue'
export default {
  name: 'specTree',
  components: {
    imgBox,specTreeItem
  },
  props: {
    data: {
      // 数据
      type: Object,
      required: true
    },
    ActivityData: {
      // 数据
      type: Object,
      required: false
    },
    fresh: {
      type: Boolean,
      required: false,
      default: false
    },
    storeId: {
      type: String,
      required: false,
      default: ''
    },
    pageType: {
      // 按钮类型
      type: String,
      required: false,
      default: 'quickPlaceOrder'
    },
		switch85:{
			type:Number,
			required: false,
			default:0
		},
    switch203:{
			type:Number,
			required: false,
			default:0
		},
    ActivityType:{
			type:Number,
			required: false,
			default:0
		},
    GradeId:{
			type:Number,
			required: false,
			default:0
		},
    Source:{
			type:Number,
			required: false,
			default:1
		},
		switch7:{
			type:Number,
			required: false,
			default:0
		},
		activeId: {
			type: Number,
			default: -1
		},
  },
  data() {
    return {
      changeData: {},
      activeUnitIndex: -1,
      activeUnitName: '',
      activeUnitRatio: 1,
      activeSpecIndex: -1,
      secondSpecList: [],
      cartRequestObj: [],
      ProductSkuAttrList: [],
      V_GradePrice: '',
      LimitBuy: '',
			minNum: 1,
    }
  },
  watch: {
    data(newVal, oldVal) {
      console.log('商品变化')
			this.data = newVal
      this.init()
    },
    fresh(newVal, oldVal) {
      console.log('gengxin')
      this.init()
    }
  },
  created() {
		console.log(this.data,"更新")
    this.init()
  },
	mounted() {
		this.init()
	},
  methods: {
		setCarListFunc(obj) {
			if(obj.length > 0){
				obj.forEach((e) =>{
					if(this.storeId){
						e.StoreId = this.storeId
					}
				})
			}
			this.cartRequestList = obj
			console.log(this.cartRequestList,"sss")
      //this.$emit('setCarListFunc', obj)
    },
		treeClickEvent(item, index) {
			this.cartRequestList = []
			console.log(this.data,"数据",item)
			if(item.ProductAttrList && item.ProductAttrList.length > 0){
				item.ProductAttrList.forEach((ele) =>{
					if(ele.ProductAttrList.length > 0){
						ele.ProductAttrList.forEach((e) => {
							if(e.ProductAttrList.length > 0){
								e.ProductAttrList.forEach((i) => {
									if(i.Amount > 0){
										var oi = {}
										oi.Amount = e.Amount
										oi.SkuId = e.SkuModel.SkuId
										oi.ProductId = this.data.ID
										this.cartRequestList.push(oi)
									}
								})
							}else{
								if(e.Amount > 0){
									var o = {}
									o.Amount = e.Amount
									o.SkuId = e.SkuModel.SkuId
									o.ProductId = this.data.ID
									this.cartRequestList.push(o)
								}
							}
						})
					}else{
						if(ele.Amount > 0){
							var obj = {}
							obj.Amount = ele.Amount
							obj.SkuId = ele.SkuModel.SkuId
							obj.ProductId = this.data.ID
							this.cartRequestList.push(obj)
						}
					}
				})
			}
			
		},
    init() {
			console.log(123123)
      this.activeUnitIndex = -1
      this.activeUnitName = ''
      this.activeUnitRatio = 1
      this.activeSpecIndex = -1
      this.secondSpecList = []
      this.cartRequestList = []
      this.changeData = this.data
			this.minNum = this.data.MinNum
      console.log('changeData',this.changeData)
      this.ProductSkuAttrList = this.changeData.ProductSkuAttrList
      this.V_GradePrice = this.changeData.V_GradePrice
			
    },

		deleteItem (item, list) {
			// 先遍历list里面的每一个元素，对比item与每个元素是否相等，再利用splice的方法删除
			for (var key in list) {
				if (list[key] === item) {
					list.splice(key, 1)
				}
			}
		},
    // 关闭弹窗
    closePopup() {
      this.$emit('closePopup')
    },

    // 加入购物车
    addCart() {
			console.log('this.cartRequestList',this.cartRequestList)
			this.closePopup()
      this.$emit('addCart', this.cartRequestList)
			// this.cartRequestList = []
			// this.activeUnitName = ''
			// this.activeUnitRatio = 1
    },
  
    changeAmount(item, num, type) {
			console.log(item,"多规格")
			if(type === 1){
				item.Amount += 1
			}else if(type === -1){
				item.Amount -= 1
			}else{
				item.Amount = num
			}
		
      const _obj = {}
      _obj.ProductId = item.ProductId
      _obj.Amount = item.Amount
      _obj.SkuId = item.ID
			_obj.Price = item.V_GradePrice
			_obj.ProductName = this.changeData.ProductName
			_obj.TotalMoney = item.Amount * item.V_GradePrice
      let _newObj = true
      this.V_GradePrice = item.V_GradePrice
      if (this.cartRequestList && this.cartRequestList.length > 0) {
        console.log('cartRequestList',1)
        console.log('cartRequestList',this.cartRequestList)
        for (let i = 0; i < this.cartRequestList.length; i++) {
          if (_obj.SkuId === this.cartRequestList[i].SkuId && _obj.ProductId === this.cartRequestList[i].ProductId) {
            this.cartRequestList[i].Amount = _obj.Amount
						this.cartRequestList[i].TotalMoney = _obj.Amount * _obj.Price
            _newObj = false
            break
          }
        }
      }
      if (_newObj) {
        this.cartRequestList.push(_obj)
        console.log('cartRequestList',2)
        console.log('cartRequestList',this.cartRequestList)
      }
    },

    AddOrEditUserCarList(obj) {
      
    },
  }
}
</script>

<style lang="scss" scoped>
// 弹窗组件
.popup-content {
  padding: 30px;
  position: relative;
  background: $colorF;
  border-radius: 40px 40px 0 0;
  .popup-close {
    position: absolute;
    right: 30px;
    top: 30px;
    z-index: 5;
  }
  .prductItem-detail {
    position: relative;
    .prductItem-p-left {
      position: absolute;
      bottom: 0;
      left: 0;
    }
    .prductItem-p-right {
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
  .skuItem {
    padding-bottom: 4px;
    .skuBtn {
      position: relative;
      font-size: 28px;
      line-height: 64px;
      padding: 0 30px;
      min-width: 136px;
      border-radius: 8px;
      overflow: hidden;
      margin: 0 20px 20px 0;
      text-align: center;
      &:before {
        content: '';
        position: absolute;
        height: 100%;
        width: 100%;
        background: currentColor;
        opacity: 0.1;
        top: 0;
        left: 0;
      }
    }
    .btn-input-box {
      position: relative;
      margin: 0 4px;
      &:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: currentColor;
        opacity: 0.1;
      }
      .btn-input {
        position: relative;
        z-index: 1;
        height: 56px;
        width: 80px;
        line-height: 1;
        border: none;
        // background: transparent;
        text-align: center;
      }
    }
    .btn-minus,
    .btn-plus {
      position: relative;
      font-size: 45px;
      line-height: 56px;
      height: 56px;
      width: 56px;
      text-align: center;
      overflow: hidden;
      border-radius: 0 8px 8px 0;
      &:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: currentColor;
        opacity: 0.1;
      }
    }
    .btn-minus {
      border-radius: 8px 0 0 8px;
    }
  }
}
.bottom-box {
  padding: 0 30px 50px 30px;
  display: flex;
  align-items: center;
  .br-left {
    border-radius: 44px 0 0 44px;
  }
  .br-right {
    border-radius: 0 44px 44px 0;
  }
}
</style>
